<template>
  <div class="mycentre">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">用户中心</div>
    </div>
    <div class="xinxi">
      <router-link to="/Gerxx">
        <img src="../../public/picture/grxx/01.jpg" alt="" />
        <span>{{ming}}</span>
      </router-link>
      <router-link to="/Gerxx">
        <span>></span>
      </router-link>
    </div>
    <div class="xiao_gj">
      <div class="din_dan">
        <p class="gr_title">我的订单</p>
        <ul>
          <li v-for="(item,index) in pic" :key="index">
            <router-link to="/Dindan">
              <span :class="item.class"></span>
              <span>{{item.title}}</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="gong_ju">
        <p class="gr_title">我的工具</p>
        <ul class="gong_gong">
          <li v-for="(item,index) in pic1" :key="index">
            <router-link :to="item.title=='购物车'?'/Cart':'/Shoucang'">
              <span :class="item.class"></span>
              <span>{{item.title}}</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="hui_yuan">
        <p class="gr_title">会员中心</p>
        <ul class="gong_gong">
          <li>
            <a href="">
              <span class="iconfont icon-youhuiquan"></span>
              <span>优惠券</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      ming:'',
      pic:[
        {class:'iconfont icon-weifukuan2',title:'未付款'},
        {class:'iconfont icon-dengdaizhong1',title:'等待中'},
        {class:'iconfont icon-yifukuan4',title:'已付款'},
        {class:'iconfont icon-gou2',title:'已发货'},
      ],
      pic1:[
        {class:'iconfont icon-gouwuche',title:'购物车'},
        {class:'iconfont icon-shoucang4',title:'收藏商品'}
      ]
    }
  },
  methods:{
    fanHui(){
      window.history.go(-1)
    },
  },
  mounted(){
    this.$axios.get('http://47.114.130.21:3000/mycentre',{
      params:{
        id:localStorage.getItem('id')
      }
    }).then((data)=>{
      this.ming=data.data
    })
  }
}
</script>

<style lang="less" scoped>
.mycentre {
  background: #f4f4f4;
  // 个人信息
  .xinxi {
    margin-top: 45px;
    display: flex;
    height: 3.2rem;
    background-color: #e64461;
    align-items: center;
    justify-content: space-around;
    > :first-child {
      align-items: center;
      display: flex;
      height: 1.066667rem;
      font-size: 20px;
      color: #f4f4f4;
      justify-content: space-between;
      img {
        height: 100%;
        border-radius: 50%;
        margin-right: 0.266667rem;
      }
      span {
        width: 180px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    :last-child {
      font-family: cursive;
      font-size: 20px;
      color: #f4f4f4;
    }
  }
  // 工具箱
  .xiao_gj {
    background: #f4f4f4;
    width: 100%;
    // 工具，订单，会员 p 标签的公共样式
    .gr_title {
      margin-top: 5px;
      background: #ffffff;
      height: 1.2rem;
      line-height: 1.2rem;
      border-bottom: 1px solid #f4f4f4;
      font-size: 13px;
      text-indent: 0.533333rem;
    }
    // 订单
    .din_dan {
      background: #ffffff;
      width: 100%;
      ul {
        height: 1.6rem;
        display: flex;
        flex-flow: row;
        justify-content: space-around;
        align-items: center;
        li {
          width: 100%;
          height: 100%;
          padding: 0px 0.4rem;
          a {
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: space-evenly;
            align-items: center;
            :first-child {
              color: #de0a2b;
              font-size: 20px;
            }
            :last-child {
              font-size: 13px;
              color: #000000;
            }
          }
        }
      }
    }
    // 我的工具和会员中心ul的公共数据
    .gong_gong {
      height: 1.6rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      li {
        padding: 0px 0.4rem;
        width: 25%;
        height: 100%;
        a {
          width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column;
          justify-content: space-evenly;
          align-items: center;
        }
        :first-child {
          color: #de0a2b;
          font-size: 20px;
        }
        :last-child {
          font-size: 13px;
          color: #000000;
        }
      }
    }
    // 工具
    .gong_ju {
      background: #ffffff;
      margin-top: 5px;
    }
    // 会员
    .hui_yuan {
      background: #ffffff;
    }
  }
}
</style>